<template>
  <div>
    <!-- <p>面签客户信息1</p> -->
    <!-- 搜索栏 -->
    <div>
      <el-form
        :inline="true"
        :model="formInline"
        class="form-inline"
        :rules="rules"
        ref="formInline"
      >
        <el-row class="Search">
          <el-col :span="8">
            <el-form-item :label="'客户姓名'" prop="custName">
              <el-input
                v-model="formInline.custName"
                placeholder="请输入客户姓名"
                size="small"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'证件号码'" prop="idNo">
              <el-input
                v-model="formInline.idNo"
                placeholder="请输入证件号码"
                size="small"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="'贷款合同'" prop="applCde">
              <el-input
                v-model="formInline.applCde"
                placeholder="请输入贷款合同"
                size="small"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="AdjustInput">
          <el-col :span="2">
            <el-form-item>
              <el-button
                type="primary"
                @click="perSearch(formInline)"
                size="mini"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="2"
            ><el-form-item>
              <el-button type="primary" @click="perReset()" size="mini"
                >重置</el-button
              >
            </el-form-item></el-col
          >
          <el-col :span="2"
            ><el-form-item>
              <el-button
                type="primary"
                @click="faceuserinfo(formInline)"
                size="mini"
                >面签审核</el-button
              >
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
    </div>
    <!-- 表单数据 -->
    <!-- table表格配置 -->
    <el-table
      ref="multipleTable"
      :data="tableData.list"
      tooltip-effect="dark"
      style="width: 100%; font-size: 10px"
      @row-click="rowClick"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :row-style="tableRowClassName"
    >
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in option"
        :key="index"
        :width="item.width"
      >
        <template slot-scope="scope">
          <!-- 添加额外的列来显示是否挂起的状态 -->
          <span v-if="item.prop === 'suspendInd'">
            {{ scope.row.status === 2 ? "是" : "否" }}
          </span>
          <!-- 其他列 -->
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row
      type="flex"
      justify="end"
      align="middle"
      style="height: 60px"
      v-if="tableData.paging"
    >
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="tableData.page.page"
        :page-size="tableData.page.pageSize"
        layout="total, prev, pager, next"
        :total="tableData.page.total"
        :small="true"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
// import {} from "@/api/";
export default {
  name: "faceuserinfoIndex",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      //表格修改背景色用
      radioId: [],
      //搜索框信息
      formInline: {
        custName: "",
        idNo: "",
        applCde: ""
      },

      //选择的待面签审核信息
      receiveInfo: []
    };
  },
  mounted() {},
  methods: {
    adjustmentInfo() {
      this.showadjustorder = false;
      console.log("调单信息", this.form3);
    },
    perSearch(val) {
      // console.log("查询", val);
      this.receiveInfo = [];
      this.$emit("getInfodata", val);
    },
    perReset() {
      this.formInline = {
        custName: "",
        idNo: "",
        applCde: ""
      };
    },
    faceuserinfo() {
      if (this.receiveInfo.length === 0) {
        return this.$message.error("请选择一条数据");
      }
      this.$emit("faceuserinfo", this.receiveInfo);
    },
    rowClick(val) {
      console.log("面签客户信息点击数据List", val);
      this.radioId = val.id;
      this.receiveInfo = []; //只能选一个数据
      this.receiveInfo.push(val);
    },

    // 分页
    handleCurrentChange(newPage) {
      this.$emit("handleChange", newPage);
    },
    // 选中单选背景色
    tableRowClassName({ row, rowIndex }) {
      if (this.radioId === row.id) {
        return {
          border: "1px solid #000",
          "background-color": "rgb(173 206 234 / 75%)"
        };
      }
    }
  }
};
</script>

<style>
.form-inline {
  /* display: flex; */
  /* justify-content: space-between; */
  /* margin-bottom: 20px; */
}
.Search {
  width: 100%;
  text-align: center;
}
.AdjustInput {
  display: flex;
  justify-content: end;
}
</style>
